<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('赔偿单', ~{::title}, ~{::content}, ~{::script})}">
<head>
    <title>工单管理-赔偿单</title>
</head>
<body>
<div th:fragment="content">
    <style>
        span {
            line-height: 34px;
        }
        label.required:before {
            content: '* ';
            color: red;
        }
    </style>
    <form class="layui-form">
        <input type="text" name="workId" th:value="${workId}" hidden>
        <input type="text" name="orderId" th:value="${orderId}" hidden>
        <!-- 工单状态 -->
        <input type="text" name="status" th:value="${compensateVO.status}" hidden>
        <!-- 工单结果  -->
        <input type="text" name="resultStatus" th:value="${compensateVO.resultStatus}" hidden>

        <div class="layui-form-item">
            <label class="layui-form-label required">赔偿原因：</label>
            <div class="layui-input-block" style="width: 200px;">
                <select name="compensateReason" lay-verify="required" lay-search>
                    <option th:each="item : ${compensateVO.compensateReason}"
                            th:value="${item.value}"
                            th:text="${item.text}"
                            th:selected="${item.selected}">
                    </option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">损坏物品：</label>
            <input th:value="${compensateVO.damageGood}" type="text" name="damageGood" placeholder="请填写损坏物品" autocomplete="off" lay-verify="damageGood" class="layui-input" style="width: auto">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">赔偿金额：</label>
            <input class="layui-input"
                   style="width: auto"
                   id="amount"
                   name="compensateAmount"
                   type="number"
                   autocomplete="off"
                   placeholder="请输入赔偿金额"
                   lay-verify="required|amount"
                   th:value="${#moneyUtil.parseToYuan(compensateVO.compensateAmount)}"
                   />
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">赔偿方式：</label>
            <div class="layui-input-block">
                <input type="radio" name="payTargetChannelId" value="1" title="支付宝" lay-filter="payTargetChannelId" th:checked="${compensateVO.payTargetChannelId == 1 ? true :false}">
                <input type="radio" name="payTargetChannelId" value="2" title="微信" lay-filter="payTargetChannelId" th:checked="${compensateVO.payTargetChannelId == 2 ? true :false}">
                <input type="radio" name="payTargetChannelId" value="5" title="银行卡" lay-filter="payTargetChannelId" th:checked="${compensateVO.payTargetChannelId == 5 ? true :false}">
                <input type="radio" name="payTargetChannelId" value="31" title="现金" lay-filter="payTargetChannelId" th:checked="${compensateVO.payTargetChannelId == 31 ? true :false}">
            </div>
        </div>
        <block id="alipayInfo" th:style="${compensateVO.payTargetChannelId == 1 ? '' :'display: none'}">
            <div class="layui-form-item">
                <label class="layui-form-label required">用户姓名：</label>
                <input th:value="${compensateVO.payTargetChannelId == 1 ? compensateVO.payeeThirdAccountName : ''}" type="text" name="payeeThirdAccountName" placeholder="请填写支付宝真实姓名" autocomplete="off" class="layui-input" style="width: auto">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">支付宝账户：</label>
                <input th:value="${compensateVO.payTargetChannelId == 1 ? compensateVO.payeeThirdAccount :''}" type="text" name="payeeThirdAccount" placeholder="请填写支付宝账号" autocomplete="off" class="layui-input" style="width: auto">
            </div>
        </block>
        <block id="weixinInfo" th:style="${compensateVO.payTargetChannelId == 2 ? '' :'display: none'}">
            <div class="layui-form-item">
                <label class="layui-form-label required">微信手机号：</label>
                <input th:value="${compensateVO.payTargetChannelId == 2 ? compensateVO.payeeThirdAccountName : ''}" type="text" name="payeeThirdAccountName" placeholder="请填写微信真实姓名" autocomplete="off" class="layui-input" style="width: auto">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信ID：</label>
                <input th:value="${compensateVO.payTargetChannelId == 2 ? compensateVO.payeeThirdAccount : ''}" type="text" name="payeeThirdAccount" placeholder="请填写微信ID" autocomplete="off" class="layui-input" style="width: auto">
            </div>
        </block>
        <block id="bankInfo" th:style="${compensateVO.payTargetChannelId == 5 ? '' :'display: none'}">
            <div class="layui-form-item">
                <label class="layui-form-label required">开户行：</label>
                <input th:value="${compensateVO.payTargetChannelId == 5 ? compensateVO.payeeThirdAccountBank : ''}" type="text" name="payeeThirdAccountBank" placeholder="请输入开户行" autocomplete="off" class="layui-input" style="width: auto">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">银行卡号：</label>
                <input th:value="${compensateVO.payTargetChannelId == 5 ? compensateVO.payeeThirdAccount : ''}" type="text" name="payeeThirdAccount" placeholder="请输入银行卡号" autocomplete="off" class="layui-input" style="width: auto">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">开户人姓名：</label>
                <input th:value="${compensateVO.payTargetChannelId == 5 ? compensateVO.payeeThirdAccountName : ''}" type="text" name="payeeThirdAccountName" placeholder="请输入开户人姓名" autocomplete="off" class="layui-input" style="width: auto">
            </div>
        </block>
        <block id="cashInfo" th:style="${compensateVO.payTargetChannelId == 31 ? '' :'display: none'}">
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <label class="layui-form-label" style="width: auto">补偿现金请线下操作</label>
            </div>
        </block>

        <div class="layui-form-item">
            <label class="layui-form-label">附件：</label>
                <div class="layui-input-block layui-col-space12">
                    <div class="layui-col-md2" th:each="item,ind : ${new int[6]}">
                        <block th:if="${ind.index!=5}">
                            <div class="layui-inline">
                                <div class="layui-upload-drag" th:id="|imageSrcUrl${ind.index}|" style="position: relative;">
                                    <div>
                                        <input type="hidden" class="img-url" th:id="|imageSrcUrl${ind.index}Value|">
                                        <i class="layui-icon"></i>
                                        <p>点击选择图片上传</p>
                                        <img th:id="|imageSrcUrl${ind.index}Values|">
                                    </div>
                                </div><input class="layui-upload-file" type="file" accept="image/*" name="file">
                            </div>
                            <div class="layui-inline" style="text-align: center;display: block;margin-left: -80px;">
                                <i class="layui-icon layui-icon-search btn-review"></i>
                                <i class="layui-icon layui-icon-delete btn-delete" th:data-index="${ind.index}"></i>
                            </div>
                        </block>
                        <block th:unless="${ind.index!=5}">
                            <div class="layui-inline">
                                <div style="padding: 20px 0px 40px 0px">
                                    <span style="font-size: 12px;color: rgb(255,0,0)">最多可上传5张，每张图片<5M，支持：jpg、jpeg、png格式图片上传</span>
                                </div>
                            </div>
                        </block>
                    </div>
                </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注：</label>
            <div class="layui-inline" style="width: 800px">
                <textarea class="layui-textarea"
                          name="content"
                          placeholder="如需说明，请备注，非必填，500字以内"
                          maxlength="500"
                          lay-verify="content"
                          th:text="${compensateVO.content}">
                </textarea>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn " lay-submit>保存</button>
        </div>
    </form>
</div>

<script th:inline="javascript">
    var images = [[${compensateVO.imageUrls}]] || [];
    var isUpdate = [[${isUpdate}]];
    var compensateReasonList = [[${compensateVO.compensateReason}]] || [];
    var layuiModel = {
         oms_work_modify_compensate: "work/modify/zmn.oms.work.modify.compensate"
    };
</script>
</body>
</html>